<script setup>
import { ref, reactive, computed } from 'vue'
import { useIndexStore } from '../../pinia'
import { ElMessage } from "element-plus"
import { request } from '@/utils/axios/request.js'
import local from '@/components/local.vue'

let locabob = ref(false)


let state = useIndexStore()
let username = ref('');
let status = ref('')
let options = [
    {
        value: '正常',
        label: '正常',
    },
    {
        value: '停用',
        label: '停用',
    },
]
let option1 = [
    {
        value: '普通员工',
        label: '普通员工',
    },
    {
        value: '普通管理员',
        label: '普通管理员',
    },
    {
        value: '超级管理员',
        label: '超级管理员',
    },
]
let caiDanS = ref(false)
let input = reactive({
    "nickname": "",
    "username": "",
    "role": "",
    "status": "",
    "created_at": "",
})
let delCai = () => {
    caiDanS.value = false
    input = reactive({
        "nickname": "",
        "username": "",
        "role": "",
        "status": "",
        "created_at": "",
    })
}
let tableDate = ref([])
let findAll = async () => {
    try {
        locabob.value = true
        let resData = await request({
            url: '/admin/user/usersAll',
            method: 'get',
        })
        resData.data = resData.data.filter(item => item.role != 0)
        resData.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        tableDate.value = resData.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}
//请求数据
findAll()

//分页
let currentPage = ref(1);
let pageSize = ref(10);

let currentDate = computed(() => {
    let statIndex = (currentPage.value - 1) * pageSize.value
    let endIndex = currentPage.value * pageSize.value
    return tableDate.value.slice(statIndex, endIndex);
})

//重置
let closed = () => {
    username.value = ''
    status.value = ''
    findAll()
}
//搜索
let search = async () => {
    try {
        locabob.value = true
        let character = status.value == '正常' ? 1 : 0
        let newdata = await request({
            url: `/admin/user/users?username=${username.value}&status=${character}`,
            method: 'get'
        })
        newdata.data = newdata.data.filter(item => item.role != 0)
        newdata.data.forEach(item => {
            item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
            item.status = item.status == 1 ? '正常' : '停用'
        })
        tableDate.value = newdata.data
        // 显示成功信息
        ElMessage.success("查询成功")
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}
//修改
let newid = ref('')
let update = (id) => {
    newid.value = id
    input.created_at = new Date().toLocaleString()
    caiDanS.value = true
    tableDate.value.forEach((item, index) => {
        if (item.id == id) {
            input.nickname = item.nickname
            input.role = item.role
            input.status = item.status
        }
    })
}
//确认新增按钮
let save = async () => {
    let obj = {}
    obj.role = input.role == '超级管理员' ? 0 : input.role == '普通管理员' ? 1 : input.role == '普通员工' ? 2 : ''
    obj.status = input.status == '正常' ? 1 : 0;
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/user/users',
            method: 'put',
            data: {
                newTableDate: obj,
                id: newid.value
            }
        })
        findAll()
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
    delCai();
}



</script>

<template>
    <div class="nav">
        <local v-show="locabob" />
        <ul class="nav_ul">
            <li>
                <span>账号:&nbsp;</span>
            </li>
            <li>
                <el-input v-model="username" placeholder="请输入账号" />
            </li>
            <li>状态:&nbsp;
                <el-select v-model="status" placeholder="请选择状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </li>
            <li><el-button type="primary" @click="search">搜索</el-button></li>
            <li><el-button @click="closed">重置</el-button></li>
        </ul>
        <div class="type_ul">
            <el-table ref="multipleTableRef" :data="currentDate">
                <el-table-column fixed prop="nickname" label="姓名" />
                <el-table-column property="username" label="账号" />
                <el-table-column property="role" label="权限" />
                <el-table-column property="status" label="状态" />
                <el-table-column property="created_at" label="创建时间" />
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="update(scope.row.id)">
                            修改
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper" :total="tableDate.length" />
        </div>
        <div class="sheZhi" :style="{ width: caiDanS ? '460px' : '0' }">
            <dl>
                <dt>
                <dd>修改</dd>
                <dd @click="delCai"><span class="iconfont icon-shanchu2"></span></dd>
                </dt>
            </dl>
            <ul>
                <li>
                    <span>修改时间:&nbsp;</span>
                    <el-input v-model="input.created_at" clearable disabled />
                </li>
                <li>
                    <span>姓名:&nbsp;</span>
                    <el-input v-model="input.nickname" clearable disabled />
                </li>
                <li>
                    <span>权限:&nbsp;</span>
                    <el-select v-model="input.role" placeholder="请选择权限">
                        <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <span>状态:&nbsp;</span>
                    <el-select v-model="input.status" placeholder="请选择状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="delCai">取消</el-button>
                </li>
            </ul>
        </div>
        <div class="mengBan" v-show="caiDanS" @click="delCai"></div>
    </div>
</template>

<style scoped lang="less">

.nav {
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);

    .nav_ul {
        display: flex;
        flex-shrink: 0;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        padding-left: 20px;
        margin-top: 10px;
        background: rgb(255, 255, 255);

        li {
            font-weight: 700;
            margin-left: 10px;
        }
    }

    .demo-pagination-block {
        padding-bottom: 40px;
        overflow: hidden;
        align-self: center;
    }

    .type_ul {
        display: flex;
        padding: 0 20px;
    }

    .sheZhi {
        width: 0px;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        background-color: white;
        z-index: 1001;
        box-shadow: -1px 0 10px rgb(143, 143, 143);
        transition: all 0.3s ease-in-out;

        dl {
            display: flex;
            flex-direction: column;

            dt:nth-child(1) {
                width: 100%;
                padding: 16px 24px;
                display: flex;
                justify-content: space-between;
                border-bottom: 0.5px solid rgba(216, 214, 214, 0.5);
                margin-bottom: 45px;


                dd:nth-child(1) {
                    font-size: 20px;
                }

                dd:nth-child(2) {
                    margin-right: 60px;

                }
            }

        }

        ul {
            display: flex;
            flex-direction: column;
            padding: 0 30px;

            .demo-pagination-block {
                padding-bottom: 40px;
                overflow: hidden;
                align-self: center;
            }

            li {
                margin-bottom: 20px;
                display: flex;
                align-items: center;

                span {
                    flex-shrink: 0;
                    margin-right: 20px;
                    font-weight: 600;
                    font-size: 14px;
                }
            }
        }
    }

    // 蒙版
    .mengBan {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: rgba(247, 247, 247, 0.3);
        filter: brightness(1%);
    }
}
</style>